<template>
  <div>
    <headTop></headTop>
    <div class="main-wrap d-flex justify-content-between">
      <div class="left-admin-nav pull-left">
        <Nav></Nav>

        <div class="title-common">故障类别统计</div>
        <div class="item-container">
          <div class="fault-class-statistics">
            <div class="top-line"></div>
            <div class="d-flex row">
              <a class="col-6 statistics-item" href="#">
                <div class="fault-icon">
                  <span class="warning-stat" id="w-number-01">{{warningType01}}</span>
                  <!-- <img src="static/img/fault_icon_01.png" class="inner-icon"> -->
                  <img src="static/img/icon_ld_bg.png" class="radar-icon radar-animate-a">
                </div>
                <p class="name">超速报警</p>
              </a>
              <a class="col-6 statistics-item" href="#">
                <div class="fault-icon">
                  <span class="warning-stat" id="w-number-02">{{warningType02}}</span>
                  <!-- <img src="static/img/fault_icon_02.png" class="inner-icon"> -->
                  <img src="static/img/icon_ld_bg.png" class="radar-icon radar-animate-b">
                </div>
                <p class="name">拆卸报警</p>
              </a>
            </div>
            <div class="bottom-line"></div>
          </div>
          <div class="fault-class-statistics">
            <div class="top-line"></div>
            <div class="d-flex row">
              <a class="col-6 statistics-item" href="#">
                <div class="fault-icon">
                  <span class="warning-stat" id="w-number-03">{{warningType03}}</span>
                  <!-- <img src="static/img/fault_icon_03.png" class="inner-icon"> -->
                  <img src="static/img/icon_ld_bg.png" class="radar-icon radar-animate-c">
                </div>
                <p class="name">主电源低压报警</p>
              </a>
              <a class="col-6 statistics-item" href="#">
                <div class="fault-icon">
                  <span class="warning-stat" id="w-number-04">{{warningType04}}</span>
                  <!-- <img src="static/img/fault_icon_04.png" class="inner-icon"> -->
                  <img src="static/img/icon_ld_bg.png" class="radar-icon radar-animate-d">
                </div>
                <p class="name">主电源掉电报警</p>
              </a>
            </div>
            <div class="bottom-line"></div>
          </div>
          <div class="fault-class-statistics">
            <div class="top-line"></div>
            <div class="d-flex row">
              <a class="col-6 statistics-item" href="#">
                <div class="fault-icon">
                  <span class="warning-stat" id="w-number-05">{{warningType05}}</span>
                  <!-- <img src="static/img/fault_icon_05.png" class="inner-icon"> -->
                  <img src="static/img/icon_ld_bg.png" class="radar-icon radar-animate-e">
                </div>
                <p class="name">信号盲区报警</p>
              </a>
              <a class="col-6 statistics-item" href="#">
                <div class="fault-icon">
                  <span class="warning-stat" id="w-number-06">{{warningType06}}</span>
                  <!-- <img src="static/img/fault_icon_06.png" class="inner-icon"> -->
                  <img src="static/img/icon_ld_bg.png" class="radar-icon radar-animate-f">
                </div>
                <p class="name">紧急报警</p>
              </a>
            </div>
            <div class="bottom-line"></div>
          </div>
        </div>
      </div>

      <div class="center-scroll-sys-msg">
        <!-- 滚动信息 -->
        <ScrollSysMsg></ScrollSysMsg>

        <div class="msg-black">{{ this.global.copyrightText }}</div>
      </div>

      <div class="right-driver-info pull-right">
        <div class="title-common">设备统计</div>
        <div class="row all-driver-data item-container">
          <div class="col-4 pie-item">
            <!-- 引入图表 -->
            <DeviceOnlineStatistic></DeviceOnlineStatistic>

            <div class="cherts-txt">设备在线统计</div>
          </div>
          <div class="col-4 pie-item">
            <DeviceAreaStatistic></DeviceAreaStatistic>
            <div class="cherts-txt">设备地区统计</div>
          </div>
          <div class="col-4 pie-item">
            <DeviceRegisteStatistic></DeviceRegisteStatistic>
            <div class="cherts-txt">设备注册统计</div>
          </div>
        </div>
        <div class="title-common">设备在线趋势统计</div>
        <DeviceOnlineTrendStatistic></DeviceOnlineTrendStatistic>

        <div class="title-common">时速分布统计(KM/H)</div>
        <OtherDataChart></OtherDataChart>
        <!-- <div class="other-driver-data item-container" id="cdemo03"></div> -->
      </div>
    </div>
    <baiduMapDataAnalysis></baiduMapDataAnalysis>
        <!-- 装饰条 -->
    <div class="top-border-decorate"><img src="static/img/border-row.png" class="inner-icon" height="100%" width="100%"></div>
    <div class="bottom-border-decorate"><img src="static/img/border-row.png" class="inner-icon" height="100%" width="100%"></div>

</div>
</template>

<script>
//引入组件
import Nav from "../../components/Nav.vue";
import headTop from "../../components/headerTop.vue";
import baiduMapDataAnalysis from "../../components/baiduMapDataAnalysis.vue";
import ScrollSysMsg from "../../components/ScrollSysMsg.vue";
import DeviceOnlineStatistic from "../../components/charts/DeviceOnlineStatistic.vue";
import DeviceAreaStatistic from "../../components/charts/DeviceAreaStatistic.vue";
import DeviceRegisteStatistic from "../../components/charts/DeviceRegisteStatistic.vue";
import DeviceOnlineTrendStatistic from "../../components/charts/DeviceOnlineTrendStatistic.vue";
import OtherDataChart from "../../components/charts/OtherDataChart.vue";

export default {
  name: "DataAnalysis",
  components: {
    Nav,
    headTop,
    baiduMapDataAnalysis,
    ScrollSysMsg,
    DeviceOnlineStatistic,
    DeviceAreaStatistic,
    DeviceRegisteStatistic,
    DeviceOnlineTrendStatistic,
    OtherDataChart
  },
  data() {
    return {
      screenHeight: document.body.clientHeight,
      warningType01:0,
      warningType02:0,
      warningType03:0,
      warningType04:0,
      warningType05:0,
      warningType06:0,
    };
  },
  created: function() {},
  watch: {
    screenHeight(winHeight) {
      setTimeout(() => {
        this.setdriverSearchListHeight();
      }, 500);
    }
  },
  methods: {
    setdriverSearchListHeight() {
      var winHeight = $(window).innerHeight();
      this.screenHeight = winHeight;
      var driverNavHeight = $("#driverNav").innerHeight();
      var dariverListPageHeight = $("#dariverListPage").innerHeight();
      var driverSearchHeight = $(".driver-search").innerHeight();
      var leftWidth = $(".left-admin-nav").width();
      var rightWidth = $(".right-driver-info").width();
      $(".right-driver-info").height(winHeight - 95);
      $(".left-admin-nav").height(winHeight - 95);
      $(".center-scroll-sys-msg").css({
        paddingLeft: leftWidth + 20,
        paddingRight: rightWidth + 20
      });
      $("#driverSearchList").height(
        winHeight - driverNavHeight - dariverListPageHeight - driverSearchHeight - 175
      );
    },

    //滚动数字
    numberJump(id, value) {   
        var num = $(id); 
        num.animate({
            count: value
        }, {    
            duration: 1200, //跳动持续时间  
              step: function() {     
                num.text(Math.round(this.count));    
            }   
        });  
    },
    //获取数据
    getWaringData(){
        var userInfo = JSON.parse(localStorage.getItem("userInfo"));
        $.ajax({
            url: this.global.warningStatDate + "?appKey=" + userInfo.appKey, //接口地址，配置在全局 golbal.vue文件
            dataType: "json",
            type: "GET",
            context: this,
            headers: {
                "Content-Type": "application/json",
            },
            success: function(res) {
                if (res.success == true && res.code == 200) {
                    console.log("请求成功");
                    this.numberJump("#w-number-01", this.$numberForamt(res.data.overSpeedCount));
                    this.numberJump("#w-number-02", this.$numberForamt(res.data.teardownCount));
                    this.numberJump("#w-number-03", this.$numberForamt(res.data.voltageLowCount));
                    this.numberJump("#w-number-04", this.$numberForamt(res.data.voltageNonCount));
                    this.numberJump("#w-number-05", this.$numberForamt(res.data.gsmLowCount));
                    this.numberJump("#w-number-06", this.$numberForamt(res.data.urgentCount));
                
                } else {
                    console.log("获取图标信息失败");
                }
            },
            complete: function(res) {},
            error: function(res) {
                console.log("获取图标信息失败");
            }
        });
    }
  },
  mounted: function() {
    //挂载页面
    document.title = "数据统计-北斗位置服务管理平台";
    const that = this;
    this.getWaringData();
    this.setdriverSearchListHeight();
    //监听窗口变化自适应
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        that.screenHeight = window.screenHeight;
      })();
    };
  }
};
</script>

<style scoped>
</style>